<template>
    <div class="chart-container">
      <div class="chart" ref="chart" :id="echartsId"></div>
      <!-- 底座背景 -->
      <div class="bg"></div>
    </div>
  </template>
  
  <script setup lang='ts'>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import 'echarts-gl';
  import { getPie3D } from './3dpie.js'; // 确保路径正确
import { useOptions } from '@/hook/useOptions'
  
  const color =  [
  "rgba(3, 230, 254, 1)",
  "rgba(184, 235, 143, 1)",
  "rgba(242, 108, 71, 1)",
];
  const chartRef = ref(null);
  const props = defineProps({
echartsData: {
 type: Array,
 default: () => [],
},
echartsId:{
 type: String,
 default: '',
},
});

let statusChart:any=null
  // 初始化label样式

  onMounted(() => {
   let  echartsData=toRaw(props.echartsData)
   console.log(echartsData,'sdfsdfsf');
   
    echartsData.forEach((item:any, index) => {
    item.itemStyle = {
      color: color[index],
    };
    item.label = {
      show: true,
      // color: color[index],
      color: '#fff',
      position: 'outside',
      offset: [20, 40],
      overflow: 'none',
      formatter: [
      '{c|{c}公顷}', 
  ' {d|{d}%}',
      ].join('\n'),

      rich: {
        b: {
          lineHeight: 25,
          align: 'right',
          // color: color[index],
      color: '#fff',

        },
        c: {
          fontSize: 22,
          textShadowColor: '#1c90a6',
          textShadowOffsetX: 20,
          textShadowOffsetY: 8,
          textShadowBlur: 5,
          // color: color[index],
      color: '#fff',

        },
        d: {
          // color: color[index],
      color: '#fff',

          align: 'left',
        },
      },
    
    };
    item.labelLine = {
      show:false,
      offset: [20, 40],
      align: 'center',
      lineStyle: {
        width: 1,
        color: color[index],
      },
    };
  });
  
    if (document.getElementById(props.echartsId))  {
       statusChart = echarts.init(document.getElementById(props.echartsId) as HTMLElement) ;
      const option:any = getPie3D(echartsData, 0.75, 200, 26, 10, 1);
    //   statusChart.setOption(option);
      // 添加透明的2D饼图以使labelLine对齐
      option.series.push({
          name: "信用评价", //自己根据场景修改
          backgroundColor: "transparent",
          type: "pie",
          label: {
            opacity: 1,
            fontSize: 13,
            lineHeight: 20,
          },
          startAngle: -40, // 起始角度，支持范围[0, 360]。
          clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
          radius: ["0%", "50%"],
          center: ["40%", "40%"],
          data: echartsData,
          itemStyle: {
            opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
          },
        });
        
      statusChart.setOption(option);
    }
  });
  onBeforeUnmount(() => {
  if (statusChart) {
    statusChart.dispose();
  }
});
  </script>
  
  <style lang='less' scoped>
  .chart-container {
    position: relative;
    width: 100%;
    height: 100%;
    .chart {
      z-index: 1;
    }
    .chart,
    .bg {
      width: 100%;
      height: 100%;
    }
  
    .bg {
      position: absolute;
      bottom: 50px;
      left: 50%;
      z-index: 0;
      height: calc(450 / 1080 * 100%);
      width: calc(1280 / 1920 * 100%);
      background: no-repeat center;
      background-image: url('../../assets/image/underGround/szy_bk.png');
      background-size: 100% 100%;
      transform: translateX(-50%);
    }
  }
  </style>
  